<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demos导航</title>
</head>
<body>
  <ul id="container"></ul>
  <script>
    (function () {
      var pages = [
        {
          pageName: '时钟翻牌器',
          pageUrl: '/block/block.html'
        },
        {
          pageName: 'canvas鼠标跟随火焰',
          pageUrl: '/canvas_fire/fire.html'
        },
        {
          pageName: 'console调试技巧',
          pageUrl: '/console/console.html'
        },{
          pageName: '3D',
          pageUrl: '/babylon.js/babylon.html'
        },
        {
          pageName: 'css3酷炫的效果-box-shadow',
          pageUrl: '/css3/box-shadow/box-shadow.html'
        },
        {
          pageName: 'css3酷炫的效果-抖音',
          pageUrl: '/css3/box-shadow/shakeMusic.html'
        },
        {
          pageName: 'css3酷炫的效果-立体文字',
          pageUrl: '/css3/linear-gradint/index.html'
        },
        {
          pageName: '网格布局的常用api与样例',
          pageUrl: '/css_grid/index.html'
        }
      ]
      var container = document.querySelector('#container');
      pages.forEach(ele => {
        var aLi = document.createElement('li');
        var aELe = document.createElement('a');
        aELe.innerText = ele.pageName;
        aELe.setAttribute('href', ele.pageUrl);
        aELe.setAttribute('target', '_blank');
        aLi.appendChild(aELe);
        container.appendChild(aLi);
      })
    })()
  </script>
</body>
</html>